﻿
/**************************************************************************************************
* 对象： VMLCurve
* 说明： VML画曲线图
*
**************************************************************************************************/
function VMLCurve(objDiv){
	
	this.objDiv = objDiv;				// obj

	this.groupID = "group_"+objDiv.uniqueID;

	this.toolTips    = "";				// 提示信息
	this.configXPerValue = 0;
    this.configYPerValue = 0;
    this.configXMinValue = 0;
    this.configYMinValue = 0; 
	
	this.OriginXValue = 0;				// 圆点坐标
	this.OriginYValue = 0;
	
	//定义区域参数
	this.group				= null;		// v:group
	this.n 					= 1			// 倍数
	this.gpWidth			= 700;		// Width
	this.gpHeight			= 350;		// Height
	
	this.configXTextLeft	= -10;		// 定义 X轴坐标值左边离坐标距离
	this.configXTextTop 	= 5;		// 定义 X轴坐标值上方离X轴的距离
	
	this.configYLeft 		= 60;		// 定义 Y轴距对象左边的距离
	this.configYTextRight	= 55;		// 定义 Y轴坐标值离Y轴右边的距离
	this.configYTextBottom 	= 10;		// 定义 Y轴坐标值离坐标下边距离
	
	//X轴值
	this.configXValue = new Array();
	//Y轴值
	this.configYValue = new Array();
	
	// Init BackGround
	this.Background		= null;	
	this.bgColor		= "#efefef";		// BackGround Color //C4E1FF
	
	// Init ToolTip
	this.configToolLeft 			= 15;
	this.configToolTop				= 15;
	this.ToolTip 					= document.createElement("DIV");
	this.ToolTip.className 			= "ToolTip";
	this.ToolTip.id					= "ToolTip";
	this.ToolTip.style.zIndex 		= "100";
	this.ToolTip.style.position		= "absolute";
	this.ToolTip.style.display		= "none";
	this.ToolTip.innerHTML			= "";
	
	//设置点线的属性
	this.PointRadius = 5; 					//圆点的半径大小
	this.LineSize    = 2;                  	//线的大小
	this.PointColor  = "#FF6600";			//点的颜色
	this.LineColor   = "#FF6600";			//线的颜色
	
	this.Points = "";
	this.PreviousPointY = 0;
	this.PointsYCount   = 0;
 
    this.pointObjs =[];
    this.lineObjs  =[];
    this.histogramObjs = [];
    this.hExtrusion = [];
    
    this.xTableLine = [];
    this.yTableLine = [];
    this.xText = [];
    this.yText = [];
    
    this.needOriginValue = true;
 }

VMLCurve.prototype.hideElGroup = function(groupName){
    for(var i=0,len = this[groupName].length;i<len;i++)    
        this[groupName][i].style.display='none';
    this[groupName]= [];            
}

VMLCurve.prototype.removeElGroup = function(groupName){
    for(var i=0,len = this[groupName].length;i<len;i++)    
        this.group.removeChild(this[groupName][i]);
        //this[elName][i].style.display='none';
    this[groupName]= [];            
}

// Init
VMLCurve.prototype.init = function(strObj,strTitle){
	
	this.gpcX			= this.gpWidth/this.n;			// coordsize X
	this.gpcY			= this.gpHeight/this.n;			// coordsize Y
	
	this.configXLen	  	= this.gpWidth - this.configYLeft*2+20;	// 定义 X轴长度
	this.configYLen	  	= this.gpHeight- 50;			// 定义 Y 轴长度
	this.configXNum		= this.configXValue.length;		// X轴刻度数
	this.configYNum		= this.configYValue.length;		// Y轴刻度数
	
    this.configXTop		= this.configYLen+20;			//定义 X轴距对象上边的距离
	
	this.configXPerLen	= str2Float((this.configXLen-20)/this.configXNum,2); //定义 X轴每刻度长度
	this.configYPerLen	= str2Float((this.configYLen-20)/this.configYNum,2); //定义 Y轴每刻度长度

	
	//初始化背景参数
	this.bgWidth		= this.gpWidth;		// Height
	this.bgHeight		= this.gpHeight;	// Width
	
	if(this.configYPerValue!=0){ 
        var tempArr = new Array(this.configYNum);
        for(var i=0;i<this.configYNum;i++){
        	tempArr[i] = str2Float(this.configYMinValue+this.configYPerValue*i,2);
        }
        this.configYValue = tempArr; 
	}
    else {
        this.configYPerValue = str2Float((this.configYValue[this.configYNum]-this.configYMinValue)/this.configYNum,2); 
    } 
    
   if(this.configXPerValue!=0){ 
        var tempArr = new Array(this.configXNum);
        for(var i=0;i<this.configXNum;i++){
        	tempArr[i] = str2Float(this.configXMinValue+this.configXPerValue*i,2);
        }
        this.configXValue = tempArr;  
	}else{
         //this.configXPerValue = str2Float((this.configXValue(this.configXNum)-this.configXMinValue)/this.configXNum,2); 
    } 
	
    this.configYValue  = this.configYValue.reverse();	//倒序数组 
	this.createGroup();
	this.createBackgroud();
	this.createCoordinate();
	this.createXTableLine();
	this.createYTableLine();
	this.createToolTip();
	
	//this.setTitle(strTitle);
	this.strObj = strObj;
}

VMLCurve.prototype.reInit = function(){
	this.gpcX			= this.gpWidth/this.n;			// coordsize X
	this.gpcY			= this.gpHeight/this.n;			// coordsize Y
	
	this.configXLen	  	= this.gpWidth - this.configYLeft*2+20;	// 定义 X轴长度
	this.configYLen	  	= this.gpHeight- 50;			// 定义 Y 轴长度
	this.configXNum		= this.configXValue.length;		// X轴刻度数
	this.configYNum		= this.configYValue.length;		// Y轴刻度数
	
    this.configXTop		= this.configYLen+20;			//定义 X轴距对象上边的距离
	
	this.configXPerLen	= str2Float((this.configXLen-20)/this.configXNum,2); //定义 X轴每刻度长度
	this.configYPerLen	= str2Float((this.configYLen-20)/this.configYNum,2); //定义 Y轴每刻度长度

	
	//初始化背景参数
	this.bgWidth		= this.gpWidth;		// Height
	this.bgHeight		= this.gpHeight;	// Width
	
	if(this.configYPerValue!=0){ 
        var tempArr = new Array(this.configYNum);
        for(var i=0;i<this.configYNum;i++){
        	tempArr[i] = str2Float(this.configYMinValue+this.configYPerValue*i,2);
        }
        this.configYValue = tempArr; 
	}
    else {
        this.configYPerValue = str2Float((this.configYValue[this.configYNum]-this.configYMinValue)/this.configYNum,2); 
    } 
    
   if(this.configXPerValue!=0){ 
        var tempArr = new Array(this.configXNum);
        for(var i=0;i<this.configXNum;i++){
        	tempArr[i] = str2Float(this.configXMinValue+this.configXPerValue*i,2);
        }
        this.configXValue = tempArr;  
	}else{
         //this.configXPerValue = str2Float((this.configXValue(this.configXNum)-this.configXMinValue)/this.configXNum,2); 
    } 
	
    this.configYValue  = this.configYValue.reverse();	//倒序数组 

	this.createXTableLine();
	this.createYTableLine();
	
}

//建立画图区域
VMLCurve.prototype.createGroup = function() {
	this.group = document.createElement("<v:group ID='"+this.groupID+"' coordsize=\""+this.gpcX+","+this.gpcY+"\" style=\"z-index:-10;width:"+this.gpWidth+"px;height:"+this.gpHeight+"px\">");
	this.objDiv.insertBefore(this.group);
}

//填充背景
VMLCurve.prototype.createBackgroud = function() {
	this.Background = document.createElement("<v:rect fillcolor=\"white\" strokecolor='#ffffff' style=\"z-index:-8;width:"+this.bgWidth+"px;height:"+this.bgHeight+"px\" />");
	this.Background.insertBefore(document.createElement("<v:fill rotate=\"t\" type=\"gradient\" color2=\""+this.bgColor+"\" />"));
	//this.Background.insertBefore(document.createElement("<v:shadow on=\"t\" type=\"single\" color=\"silver\" offset=\"3pt,2pt\" />"));
	this.group.insertBefore(this.Background);
}

//建立坐标轴
VMLCurve.prototype.createCoordinate = function() {
	var pointX1 = this.configYLeft + "," + this.configXTop;
	var pointX2 = this.configYLeft+this.configXLen + "," + this.configXTop;
	var pointY1 = pointX1;
	var pointY2 = this.configYLeft + "," + eval(this.configXTop-this.configYLen);
	this.createCoordinateLine(pointY1,pointX2);
	this.createCoordinateLine(pointY1,pointY2);
	this.setOriginValue(this.OriginXValue,this.OriginYValue);
}

//建立坐标线
VMLCurve.prototype.createTableLine = function(xPoint,yPoint,sTableColor,mode){
	var tempLine = document.createElement("<v:line from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\""+sTableColor+"\" style=\"Z-INDEX:8;POSITION:absolute;/>");
	this.group.insertBefore(tempLine);
	var type="Solid";
	tempLine.insertBefore(document.createElement("<v:stroke dashstyle=\""+type+"\" />"));
	
	if(mode==="x"){
	    this.xTableLine.push(tempLine);
	}else{
	    this.yTableLine.push(tempLine);
	}
}


//画坐标轴线
VMLCurve.prototype.createCoordinateLine = function(xPoint,yPoint){
	var tempLine = document.createElement("<v:line from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\"#FF6600\" strokeweight=\"1px\" style=\"Z-INDEX:8;POSITION:absolute;\"/>");
	this.group.insertBefore(tempLine);
	tempLine.insertBefore(document.createElement("<v:stroke  EndArrow=\"classic\" />"));
}

//创建文本提示信息
VMLCurve.prototype.createText = function(xLeft,xTop,sText,sClass,mode,push2) {
	//debugger;
	if(push2=="y")
	    var tempObj = document.createElement("<P class=\""+sClass+"\" align='right' style=\"Z-INDEX:8;LEFT:"+xLeft+"px;width:50px;POSITION:absolute;TOP:"+xTop+"px;\"/>");
	else
	    var tempObj = document.createElement("<P class=\""+sClass+"\" align='right' style=\"Z-INDEX:8;LEFT:"+xLeft+"px;POSITION:absolute;TOP:"+xTop+"px;\"/>");
	    
	tempObj.innerHTML = sText;
	this.group.insertBefore(tempObj);
	
	if(mode===true){
	    tempObj.style.left = xLeft-tempObj.offsetWidth-(this.configXPerLen-tempObj.offsetWidth)/2;
	}
	
	if(push2!=undefined){
	    if(push2=="x") this.xText.push(tempObj);
	    else this.yText.push(tempObj);
	}
	//alert(tempObj.offsetWidth);
	//debugger;
}

// 创建X坐标网格线
VMLCurve.prototype.createXTableLine = function(){
	var x1,y1,x2,y2,point1,point2,sTableColor;
	sTableColor = "#CCCCCC";
	for(var i=0;i<this.configXValue.length;i++){
		x1 = eval(this.configYLeft + this.configXPerLen*(i+1));
		y1 = eval(this.configXTop-this.configXHeight);//eval(this.configXTop-this.configYLen)+10;
		x2 = x1;
		y2 = eval(this.configXTop+0);
		point1 = x1 + "," + y1; 
		point2 = x2 + "," + y2;
    	this.createTableLine(point1,point2,'#FF6600',"x");
        
        if(this.configXTextMode==="middleSpace")
    	    this.createText(x1,this.configXTop+this.configXTextTop,this.configXValue[i],"pBlack",true,"x");
    	else
    	    this.createText(x1+this.configXTextLeft,this.configXTop+this.configXTextTop,this.configXValue[i],"pBlack",false,"x");
    	    
	}
}

//创建Y轴坐标网格线
VMLCurve.prototype.createYTableLine = function(){
	var x1,y1,x2,y2,point1,point2,sTableColor;
	for(var i=0;i<this.configYValue.length;i++){
		x1 = eval(this.configYLeft - 0);
		y1 = eval(this.configXTop - this.configYPerLen*(i+1));
		x2 = eval(this.configYLeft + this.configXLen - 10);
		y2 = y1;
		point1 = x1 + "," + y1; 
		point2 = x2 + "," + y2;
    	if(this.configYValue[this.configYValue.length-i-1]=="C2") sTableColor="#FF9900";
		else sTableColor = "#CCCCCC";
		this.createTableLine(point1,point2,sTableColor,"y");
		y1-=2;
		//debugger;
		this.createText(this.configYLeft-this.configYTextRight,y1-this.configYTextBottom,this.configYValue[this.configYValue.length-i-1],"pBlack",false,"y");
	}
}


//设置标题
VMLCurve.prototype.setTitle = function(strTitle){
	var tempObj = document.createElement("<div class=\"Title\" style=\"POSITION:absolute;Z-INDEX:9;LEFT:"+40+"px;TOP:"+(this.configXTop+40)+"px;width:"+(this.configXLen)+"px;height:"+(this.gpHeight-this.configXTop-20)+";/>");
	tempObj.innerHTML = strTitle;
	this.group.insertBefore(tempObj);
}

// 画圆点坐标
VMLCurve.prototype.setOriginValue = function(x,y){
	if(this.needOriginValue===true)
	    this.createText(this.configYLeft+this.configXTextLeft,this.configXTop+this.configXTextTop,x,"pBlack");
	//this.createText(this.configYLeft-this.configYTextRight,this.configXTop-this.configYTextBottom,y,"pBlack");
}


// 设置圆点坐标属性
VMLCurve.prototype.setPointsProp = function(sPointRadius,sLineSize,sPointColor,sLineColor){
	this.PointRadius = sPointRadius; 		//圆点的半径大小
	this.LineSize    = sLineSize;          	//线的大小
	this.PointColor  = sPointColor;			//点的颜色
	this.LineColor   = sLineColor;			//线的颜色
}


// 设置纵坐标的值
VMLCurve.prototype.setPointsValue = function(xValueArr,yValueArr,sValueArr){
    var sValue  = "";
    var xValue  = 0;
	var yValue  = 0;
	var tempLen = 0;
	var thisX   = 0; 
	var thisY   = 0; 
	var tempX   = 0;
    var tempY   = 0; 
	this.pointObjs.push([]);
	for(var i=0;i<xValueArr.length;i++){
        thisX   = str2Float(xValueArr[i],2); 
        thisY   = str2Float(yValueArr[i],2); 
        sValue  = sValueArr[i]; 
        
        //tempX   = str2Float((thisX - this.OriginXValue)/this.configXPerValue,2);
		tempY   = str2Float((thisY - this.OriginYValue)/this.configYPerValue,2);
		xValue  = str2Float(this.configYLeft + str2Float(thisX*this.configXPerLen,2),2);
		yValue  = str2Float(this.configXTop - str2Float(tempY*this.configYPerLen,2),2);
		
		this.Points = this.Points + xValue + "," + yValue + " ";	
		this.createPoint(xValue,yValue,sValue);
	}
	this.createCurveLine();
	this.PreviousPointY = 0;
	this.Points         = 0;
	this.PointsYCount   = 0;
}

//创建一组柱状图
VMLCurve.prototype.createHistograms = function(xValueArr,yValueArr,titles,color){
    var xValue  = 0;
	var yValue  = 0;
	var tempLen = 0;
	
	var thisX   = 0; 
	var thisY   = 0; 
	var tempX   = 0;
    var tempY   = 0; 
    
    var title   = "";
    //debugger;
	for(var i=0;i<xValueArr.length;i++){
        xValue = [];
        yValue = [];
        thisX = [];
        thisY = [];
        tempY = [];
        title = [];
        for(var j=0;j<yValueArr[i].length;j++){
            thisX.push(str2Float(xValueArr[i],2)); 
            thisY.push(str2Float(yValueArr[i][j],2)); 

    		tempY.push(str2Float((thisY[j] - this.OriginYValue)/this.configYPerValue,2));
    		xValue.push(str2Float(this.configYLeft + str2Float(thisX[j]*this.configXPerLen,2),2));
    		yValue.push(str2Float(this.configXTop - str2Float(tempY[j]*this.configYPerLen,2),2));
    		
    		title.push(titles[i][j]);
	    }
        this.createHistogramGroup(xValue,yValue,thisX,tempY,title,color);
	}
};

VMLCurve.prototype.createHistogramGroup = function(sLeft,sTop,thisX,tempY,title,color){
    
    var count   = sLeft.length;
    var space1  = 10;
    var hwidth  = 30;//parseInt((this.configXPerLen- space*(count+1))/count,10);    //
    var space2  = parseInt((this.configXPerLen - hwidth*count-space1*(count-1))/2,10);
    
    var nowLeft = space2;
    
    for(var i=0;i<sLeft.length;i++){
        var left = sLeft[i]-this.configXPerLen+nowLeft;
        this.createHistogram(left,sTop[i],hwidth,thisX[i],tempY[i],title[i],color[i]);
        nowLeft+=hwidth+space1;
    }
};

VMLCurve.prototype.createHistogram = function(sLeft,sTop,hwidth,thisX,tempY,title,color){

    //var fColWidth=parseInt(this.configXPerLen/4,10);    //去1/4宽度
    var py = sLeft;//-hwidth-(this.configXPerLen-hwidth)/2;
    var px = sTop -0;
    var h = tempY*this.configYPerLen;
    
    var color1="rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"
    if(color!=null || color!=undefined) color1 = color;
    var newShape= document.createElement("<v:rect style='cursor:hand;position:absolute;left:"+py+";top:"+px+";WIDTH:" + hwidth + "px;HEIGHT:"+h+"px;z-index:9;border-width:0' fillcolor='" + color1 + "' title = '"+title+"'></v:rect>");  //
    var tmpO = document.createElement("<o:extrusion on='true' backdepth='0'/>");

	this.group.insertBefore(newShape);
	newShape.insertBefore(tmpO);
	
	this.histogramObjs.push(newShape);
	this.hExtrusion.push(tmpO);
};

VMLCurve.prototype.hideHistograms = function(){
    if(arguments.length==1&&arguments[0]===true){
        this.removeElGroup("histogramObjs");
        //this.removeElGroup("hExtrusion");
        this.removeElGroup("xTableLine");
        this.removeElGroup("yTableLine");
        this.removeElGroup("xText");
        this.removeElGroup("yText");
    }else{
        this.hideElGroup("histogramObjs");
        this.hideElGroup("hExtrusion");
        this.hideElGroup("xTableLine");
        this.hideElGroup("yTableLine");
        this.hideElGroup("xText");
        this.hideElGroup("yText");
    }
};

VMLCurve.prototype.createPolyLines = function(){
};

VMLCurve.prototype.hideCoordinate = function(){
    if(arguments.length==1&&arguments[0]===true){
        this.removeElGroup("xTableLine");
        this.removeElGroup("yTableLine");
        this.removeElGroup("xText");
        this.removeElGroup("yText");
    }else{
        this.hideElGroup("xTableLine");
        this.hideElGroup("yTableLine");
        this.hideElGroup("xText");
        this.hideElGroup("yText");
    }
};

VMLCurve.prototype.hidePolyLine = function(){
    if(arguments.length==1&&arguments[0]===true){
        for(var i=0,len = this.pointObjs.length;i<len;i++){
            for(var j=0;j<this.pointObjs[i].length;j++)
                this.group.removeChild(this.pointObjs[i][j]);
        }
        this.pointObjs= [];            
        
        
        this.removeElGroup("lineObjs");
        
        this.removeElGroup("xTableLine");
        this.removeElGroup("yTableLine");
        this.removeElGroup("xText");
        this.removeElGroup("yText");
    }else{
        for(var i=0,len = this.pointObjs.length;i<len;i++){
            for(var j=0;j<this.pointObjs[i].length;j++)
                this.pointObjs[i][j].style.display='none';
        }
        
        this.hideElGroup("lineObjs");

        this.hideElGroup("xTableLine");
        this.hideElGroup("yTableLine");
        this.hideElGroup("xText");
        this.hideElGroup("yText");
    }
};


// create Point
VMLCurve.prototype.createPoint = function(sLeft,sTop,sText){
	//根据圆点的坐标,得到左上方点的坐标
	var xLeft  = sLeft - this.PointRadius;
	var xTop   = sTop  - this.PointRadius;
	var tempOval = document.createElement("<v:oval style=\"POSITION:absolute;Z-INDEX:12;LEFT:"+xLeft+"px;TOP:"+xTop+"px;width:"+2*this.PointRadius+";height:"+2*this.PointRadius+";cursor:hand;\" stroked=\"f\" fillcolor=\""+this.PointColor+"\" strokeweight=\"1px\" title='"+sText+"'/>");
	this.group.insertBefore(tempOval);
	var _index = this.pointObjs.length-1;
	
	this.pointObjs[_index].push(tempOval);
}

//以两点为坐标画线
VMLCurve.prototype.createCurveLine = function(){
	var tempLine = document.createElement("<v:PolyLine Points=\""+ this.Points +"\" style=\"Z-INDEX:11;POSITION:absolute;\" strokeweight=\""+this.LineSize+"px\" filled=\"f\" />");
	var newStroke = document.createElement("<v:stroke dashstyle='solid' color='"+this.LineColor+"'/>");
	this.group.insertBefore(tempLine);
	tempLine.insertBefore(newStroke);
	
	this.lineObjs.push(tempLine);
}


VMLCurve.prototype.createToolTip = function(){
	this.group.insertBefore(this.ToolTip);
}

VMLCurve.prototype.setToolTip = function(sVisitable,sContent,x,y){
	this.ToolTip.style.pixelLeft 	= x + this.configToolLeft;
	this.ToolTip.style.pixelTop		= y + this.configToolTop;
	this.ToolTip.style.display		= sVisitable;
	if(this.ToolTip.innerHTML==""){
		this.ToolTip.innerHTML = sContent; 
	}
	if(sContent==""){
		this.ToolTip.innerHTML = "";
	}
}

/*********************************
* 字符串转换为数字(""-->0)as_type--str,num
* 参数说明:
as_str--转换的字符串
ai_digit--转换的小数位数(null--不限制小数位数,0--转换为整型,>0按小数位数转换)
as_type--转换后返回的类型(null,"num"--转换为数字类型,"str"--转换为字符串
(按小数格式化后的字符串)
* 例如:
* str2float("10.2124568795")返回float类型10.2124568795
* str2float("10.6",0)返回Int类型11(使用四舍五入的方法)
* str2float("10.2",2)返回float类型10.1
* str2float("10.2",2,"str")返回String类型"10.20"(按小数位数格式化字符串)
* str2float("10.216",2)返回float类型10.22
* str2float("10.216",2,"str")返回String类型"10.22"
**********************************/
function str2Float(as_str,ai_digit,as_type)
{
   var fdb_tmp = 0;
   var fi_digit = 0;
   var fs_digit = "1";
   var fs_str = "" + as_str;
   var fs_tmp1 = "";
   var fs_tmp2 = "";
   var fi_pos = 0;
   var fi_len = 0;
   fdb_tmp = parseFloat(isNaN(parseFloat(fs_str))?0:fs_str);
   
   switch (true)
   {
	  case (ai_digit==null):       //不改变值,只转换为数字
		 fdb_tmp = fdb_tmp;
		 break;
	  case (ai_digit==0):          //取得整数
		 fdb_tmp = Math.round(fdb_tmp);
		 break;
	  case (ai_digit>0):            //按照传入的小数点位数四舍五入取值
		 for (var i=0;i<ai_digit;i++) fs_digit +="0";
		 fi_digit = parseInt(fs_digit);
		 fdb_tmp = Math.round(fdb_tmp * fi_digit) / fi_digit;
		 if (as_type=="str")
		 {
			fs_tmp1 = fdb_tmp.toString();
			fs_tmp1 +=((fs_tmp1.indexOf(".")!=-1)?"":".") + fs_digit.substr(1);
			fi_pos = fs_tmp1.indexOf(".") + 1 + ai_digit;
			fdb_tmp = fs_tmp1.substr(0,fi_pos);
		 }
		break;
   }
   return fdb_tmp;
} 
